<template>
  <div class="kgh-container">
    <div class="section section-header">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6 sec-mrb">
            <ul class="nav nav-pills">
              <li role="presentation" style="margin-right: 40px">
                <h4>
                  <a href="javascript:;" :class="{'text-primary':fileType=='','text-black':fileType!=''}" @click="fileType=''">全部</a>
                </h4>
              </li>
              <li role="presentation" style="margin-right: 40px">
                <h4>
                  <a href="javascript:;" :class="{'text-primary':fileType==2,'text-black':fileType!=2}" @click="fileType=2">文档</a>
                </h4>
              </li>
              <li role="presentation" style="margin-right: 40px">
                <h4>
                  <a href="javascript:;" :class="{'text-primary':fileType==3,'text-black':fileType!=3}" @click="fileType=3">模型</a>
                </h4>
              </li>
              <li role="presentation">
                <h4>
                  <a href="javascript:;" :class="{'text-primary':fileType==1,'text-black':fileType!=1}" @click="fileType=1">压缩</a>
                </h4>
              </li>
            </ul>
          </div>
          <div class="col-xs-12 col-md-6 sec-mrb">
            <div class="form-inline search-box">
              <div class="form-group search-form">
                <span class="glyphicon glyphicon-search search-icon"></span>
                <div class="search-input">
                  <input type="text" v-model="searchText">
                </div>
                <button type="button" class="search-btn" @click="fetchCurriculumList()">搜索</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <!-- <div class="row row section-header">
                    <div class="col-sm-12 text-center">
                        
                        <h4>最新资源</h4>
                    </div>
                </div> -->
        <!-- /curriculum/shareFileList  -->
        <div class="row">
          <div class="col-sm-12 table-responsive">
            <div class="file-table">
              <table class="table">
                <tr class="nobor">
                  <th>资源名称</th>
                  <th>上传时间</th>
                  <th>作者</th>
                  <th>文件大小</th>
                  <th>下载链接</th>
                </tr>
                <tr v-for="item in fileList" :key="item.id">
                  <td>{{item.fileName}}</td>
                  <td>{{timestampToTime(item.createTime)}}</td>
                  <td>{{item.userName}}</td>
                  <td class="color-hint">限制{{dealFileLength(item.fileLength)}}以内</td>
                  <td>
                    <!-- /curriculum/downloadShare id: -->
                    <a href="javascript:;" class="text-primary" @click="handleDownload(item.id)">点击下载</a>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="row text-center load-more" v-if="loadShow">
          <a href="javascript:;" @click="fetchMoreData()">加载更多</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import util from '@/assets/js/utils.js'
// @ is an alias to /src

export default {
  name: 'index',
  data() {
    return {
      fileType: '',
      fileList: [],
      searchText: '',
      loadShow: true,
      pageNum: 0
    }
  },
  created() {
    this.fetchFileList()
  },
  watch: {
    fileType() {
      this.handleInitPage()
      this.fetchFileList()
    }
  },
  computed: {},
  methods: {
    handleInitPage() {
      this.fileList = []
      this.loadShow = true
      this.pageNum = 0
    },
    fetchFileList() {
      //资源
      let that = this
      axios
        .post(
          '/curriculum/shareFileList',
          qs.stringify({
            type: that.fileType,
            from: this.pageNum
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.fileList = that.fileList.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleDownload(id) {
      let that = this
      axios
        .post(
          '/curriculum/downloadShare',
          qs.stringify({
            id: id
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            window.open(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    dealFileLength(num) {
      if (num > 1024) {
        let k = num / 1024
        if (k > 1024) {
          return Math.ceil(k / 1024) + 'M'
        } else {
          return Math.ceil(k) + 'KB'
        }
      } else {
        return num + 'B'
      }
    },
    timestampToTime(time) {
      return util.timestampToTime(time)
    },
    fetchMoreData() {
      // 加载更多
      this.pageNum += 1
      this.fetchFileList()
    }
  }
}
</script>

<style lang="scss" scoped>
table th {
  font-size: 20px;
  font-weight: 500;
  padding: 20px 0 30px;
}
</style>